<html>

<head>
  <title>小米官网仿写</title>
</head>

<body>
  <!-- 顶部内容 -->
  <div class="header">
    <!-- 版心 -->
    <div class="typesetting">
      <div class="header-left">
        <ul>
          <li><a href="#" class="no-left">小米商城</a></li>
          <li><a href="#">MIUI</a></li>
          <li><a href="#">loT</a></li>
          <li><a href="#">云服务</a></li>
          <li><a href="#">天星数科</a></li>
          <li><a href="#">有品</a></li>
          <li><a href="#">小爱开放平台</a></li>
          <li><a href="#">企业团购</a></li>
          <li><a href="#">资质证照</a></li>
          <li><a href="#">协议规则</a></li>
          <li><a href="#">下载app</a></li>
          <li><a href="#">智能生活</a></li>
          <li><a href="#">Select Location</a></li>
        </ul>
      </div>
      <div class="header-right">
        <ul>
          <li><a href="#" class="no-left">登录</a></li>
          <li><a href="#">注册</a></li>
          <li><a href="#">消息通知</a></li>
          <li><a href="#" class="shopping-cart">购物车（0）</a></li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 导航栏 -->
  <div class="navbar typesetting">
    <div class="logo"><a href="#"><img src="./static/logo.png" alt=""></a></div>
    <ul>
      <li><a href="#">小米手机</a></li>
      <li><a href="#">Redmi 红米</a></li>
      <li><a href="#">电视</a></li>
      <li><a href="#">笔记本</a></li>
      <li><a href="#">家电</a></li>
      <li><a href="#">路由器</a></li>
      <li><a href="#">智能硬件</a></li>
      <li><a href="#">服务</a></li>
      <li><a href="#">社区</a></li>
    </ul>
    <div class="search">
      <input type="text" value="小米手机">
      <button>
        <img src="./static/search.png" alt="">
      </button>
    </div>
  </div>
  <!-- 轮播图 -->
  <div class="carousel typesetting">
    <div class="category-list">
      <ul>
        <li class="category-item"><a href="">手机 电话卡</a></li>
        <li class="category-item"><a href="">电视 盒子</a></li>
        <li class="category-item"><a href="">笔记本 显示器</a></li>
        <li class="category-item"><a href="">家电 插线板</a></li>
        <li class="category-item"><a href="">出行 穿戴</a></li>
        <li class="category-item"><a href="">智能 路由器</a></li>
        <li class="category-item"><a href="">电源 配件</a></li>
        <li class="category-item"><a href="">健康 儿童</a></li>
        <li class="category-item"><a href="">耳机 音响</a></li>
        <li class="category-item"><a href="">生活 箱包</a></li>
      </ul>
    </div>
    <div class="image-list">
      <a href="#"><img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a5ebb3ecd10ba5b5f1fa25125d034492.jpg?thumb=1&w=1226&h=460&f=webp&q=90"
          alt=""></a>
    </div>
  </div>
  <!-- 轮播图下方导航 -->
  <div class="sub-nav typesetting">
    <div class="channel-list">
      <dl>
        <a href="#">
          <dt>
            <img src="./static/channel1.png" alt="">
            <dd>小米秒杀</dd>
          </dt>
        </a>
      </dl>
      <dl>
        <a href="#">
          <dt>
            <img src="./static/channel2.png" alt="">
            <dd>企业团购</dd>
          </dt>
        </a>
      </dl>
      <dl>
        <a href="#">
          <dt>
            <img src="./static/channel3.png" alt="">
            <dd>F码通道</dd>
          </dt>
        </a>
      </dl>
      <dl>
        <a href="#">
          <dt>
            <img src="./static/channel4.png" alt="">
            <dd>米粉卡</dd>
          </dt>
        </a>
      </dl>
      <dl>
        <a href="#">
          <dt>
            <img src="./static/channel5.png" alt="">
            <dd>以旧换新</dd>
          </dt>
        </a>
      </dl>
      <dl>
        <a href="#">
          <dt>
            <img src="./static/channel6.png" alt="">
            <dd>花费充值</dd>
          </dt>
        </a>
      </dl>
    </div>
    <div class="promo-list">
      <ul class="clearfix">
        <li><a href="#"><img src="./static/promo1.jpg" alt=""></a></li>
        <li><a href="#"><img src="./static/promo2.jpg" alt=""></a></li>
        <li><a href="#"><img src="./static/promo3.jpg" alt=""></a></li>
      </ul>
    </div>
  </div>
</body>
<link rel="stylesheet" href="./xiaomi.css">
<script src="./xiaomi.js"></script>

</html>